<template>
  <div class="flex_label">
    <div class="label_div">
      <div class="positon_div">
        <el-button type="danger" plain icon="el-icon-lock" :disabled="selectionareaId.length === 0" size="medium"
          @click="handledisabled('1')" v-hasPermi="['manage_Print_disaledNFC']">禁用NFC</el-button>
        <el-button type="success" plain icon="el-icon-unlock" :disabled="selectionareaId.length === 0" size="medium"
          @click="handledisabled('0')" v-hasPermi="['manage_Print_disaledNFC']">启用NFC</el-button>
      </div>
      <el-table v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="序号" align="center" prop="order" width="50" />
        <el-table-column label="区域编号" align="center" min-width="150">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleSelectNum(scope.row)">{{ scope.row.areaNum || '-' }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="区域名称" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.areaName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="包含位置" align="center" min-width="130" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.places" :key="index">
              {{ item.placeName || '-' }}({{ item.placeNum || '-' }})、
            </span>
          </template>
        </el-table-column>
        <el-table-column label="NFC-ID" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.nfcId || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="NFC-编码" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.nfcCode || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="NFC状态" align="center" min-width="150">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.nfcStatus" @change="handledisabled('3', scope.row)" active-value="0"
              inactive-value="1">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="所属位置" align="center" min-width="130">
          <template slot-scope="scope">
            {{ ['室内位置', '室外位置'][scope.row.position] || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="建筑物名称" align="center" min-width="130">
          <template slot-scope="scope">
            {{ scope.row.buildingName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="建筑物/位置坐标" align="center" min-width="130">
          <template slot-scope="scope">
            经度:{{ scope.row.longitude || '-' }}
            纬度:{{ scope.row.latitude || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="最后打印时间" align="center" min-width="150">
          <template slot-scope="scope">
            {{ scope.row.lastPrintTime || '-' }}
          </template>
        </el-table-column>

        <el-table-column label="备注" align="center" min-width="130" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.remark || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="创建部门" align="center" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.deptName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.createBy || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button v-hasPermi="['manage_Print_update']" size="small" icon="el-icon-edit" type="primary"
              @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button v-hasPermi="['manage_Print_updateNFC']" size="small" icon="el-icon-edit" type="primary"
              @click="handleUpdateNFC(scope.row)">编辑NFC</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <div class="label_div">
      <el-button size="medium" icon="el-icon-view" :loading="loadingbtn" @click="PreviewView">预览</el-button>
      <el-button size="medium" type="primary" icon="el-icon-download" @click="handlePrint" plain>打印</el-button>
      <div id="printDiv">
        <el-card class="ImgCode_flex" style="clear:both;page-break-inside:auto;" v-for="(item, index) in browseList"
          :key="index">
          <div class="div_flex">
            <img :src="item.img" class="imgSize" style="width:430px;height:430px;">
          </div>
          <div class="div_flex" style="margin-left: 60px;">
            <p>区域名称:<span style="color: #999;">{{ item.name || '-' }}</span></p>
            <p>区域编号:<span style="color: #999;">{{ item.num || '-' }}</span></p>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 详情页面 -->
    <template v-if="open">
      <SubsetList :title="title" :rowObj="rowObj"></SubsetList>
    </template>
    <template v-if="openArea">
      <AddArea :title="titleArea" :rowObj="rowObj" @handleSelectList="handleSelectList"></AddArea>
    </template>
    <template v-if="openAreaNFC">
      <UpdateNfc :rowObj="rowObjNFC" @handleSelectList="handleSelectList"></UpdateNfc>
    </template>
  </div>
</template>

<script>
import { arealist, postqrCodeImglist, putarealastPrintTime, putUpdateNFCstatus } from "@/api/equipment/equipment.js";
export default {
  name: "areaLabel",
  // dicts: ['sys_notice_status', 'sys_notice_type'],
  components: {
    SubsetList: () => import('../form/SubsetList.vue'),
    UpdateNfc: () => import('@/views/A-Repeatplay/deviceManagement/equipment/Print/areaLabel/form/updateNfc.vue'),
    AddArea: () => import('@/views/A-Repeatplay/deviceManagement/equipment/Print/areaLabel/form/addArea.vue')//添加子组件
  },
  data () {
    return {
      // 遮罩层
      loadingbtn: false,
      loading: true,
      opendetailed: false,
      detailedObj: {},
      openArea: false,
      openAreaNFC: false,
      titleArea: '修改区域',
      rowObj: {},
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      dictdatalist: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层表格数据
      noticeList: [],
      rowObj: {},
      rowObjNFC: {},
      // 弹出层标题
      title: "所含设备明细",
      // 是否显示弹出层
      open: false,
      selectionImg: [],
      browseList: [],
      selectionareaId: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'areaId',//排序字段
        isAsc: 'desc'//倒叙
      },
    };
  },
  created () {
    this.getList();
  },
  methods: {

    /** 查询列表 */
    async getList () {
      this.loading = true;
      // let obj = value || {}
      let params = {
        ...this.queryParams,
        // ...obj,
        // 'equipmentBaseVo.equipmentName': obj.equipmentName
      }
      //  let data = await getdatalist({ dictType: 'base_unit' })
      //  this.dictdatalist=data.data
      arealist(params).then(response => {
        this.noticeList = response.data && response.data.map((item, index) => {
          return {
            ...item,
            order: index + 1
          }
        });
        this.total = response.total;
        this.loading = false;
      });
    },
    handleUpdateNFC (row) {

      this.openAreaNFC = true
      this.rowObjNFC = row
    },
    handleUpdate (row) {//编辑按钮
      this.openArea = true
      this.rowObj = row
    },
    handleSelectList () {
      this.openArea = false
      this.getList()
    },
    /**
     * 打印方法
     */
    handlePrint () {
      if (this.selectionImg.length === 0) {
        return this.$message.error('请选择需打印的数据')
      }
      if (this.browseList.length === 0) return this.$message.error('请预览选择的数据')
      putarealastPrintTime(this.selectionareaId.join(',')).then(() => { this.getList(); })
      var newWin = window.open(""); //新打开一个空窗口
      var imageToPrint = document.getElementById("printDiv"); //获取需要打印的内容
      newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
      const styleSheet = ``
      // newWin.document.addClass()
      newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式

      newWin.document.close(); //在IE浏览器中使用必须添加这一句

      newWin.focus(); //在IE浏览器中使用必须添加这一句

      setTimeout(function () {
        newWin.print(); //打印
        newWin.close(); //关闭窗口

      }, 100);

    },
    // 打开详细弹窗
    handleSelectNum (row) {
      this.rowObj = row
      this.open = true
    },
    PreviewView () {//预览
      if (this.selectionImg.length === 0) {
        return this.$message.error('请选择需预览的数据')
      }
      this.loadingbtn = true
      let params = [
        ...this.selectionImg
      ]
      postqrCodeImglist(params).then(res => {
        this.browseList = []
        this.browseList = res.data
        this.loadingbtn = false
      }).catch(err => {
        this.loadingbtn = false
        this.$message.error(err)
      })
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.selectionareaId = selection.map(item => item.areaId)
      this.selectionImg = selection.map(item => {
        return {
          num: item.areaNum,//位置编号
          name: item.areaName//位置名称
        }
      })
      // this.single = selection.length != 1
      // this.multiple = !selection.length
    },
    /** 启用禁用按钮操作 */
    handledisabled (condition, row) {
      let params;
      let neorong;
      if (row) {
        params = {
          "areaIds": [row.areaId], //区域id
          "nfcStatus": row.nfcStatus //NFC状态(0启动 1禁用)
        }
        this.loading = true;
        putUpdateNFCstatus(params).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getList()
          }
          this.loading = false;
        }).catch(() => { this.loading = false; })
        return false
      } else {
        params = {
          "areaIds": this.selectionareaId, //区域id
          "nfcStatus": condition //NFC状态(0启动 1禁用)
        }
        neorong = `是否确认${condition === '0' ? `禁用` : `启用`}全部数据？`
      }
      this.$confirm(`${neorong}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        putUpdateNFCstatus(params).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getList()
          }
          this.loading = false;
        })
      }).catch(() => { this.loading = false; });
    }
  },
  filters: {
  }
};
</script>
<style lang="scss" scoped>
.positon_div {
  display: inline;
  position: absolute;
  top: 20px;
  left: 13em;
}

.red {
  color: red;
}

.imgSize {
  width: 200px !important;
  height: 200px !important;
  margin: 25px 0px !important;
}

.flex_label {
  // display: flex;
  width: 100%;

  .label_div:nth-child(1) {
    // flex: 5;
    float: left;
    width: 55%;
  }

  .label_div:nth-child(2) {
    // flex: 4;
    float: left;
    width: 43%;
    margin-left: 20px;
  }
}

.ImgCode_flex {
  margin-top: 10px !important;
  font-size: 14px;

  ::v-deep .el-card__body {
    display: flex;
    padding: 15px;

    .div_flex:nth-child(1) {
      flex: 1;

      img {
        width: 180px;
        height: 180px;
      }
    }

    .div_flex:nth-child(2) {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      position: relative;
      top: 0 !important;
      margin-left: 0px !important;

      span {
        color: #999;
      }
    }
  }
}
</style>
